<template>
  <div class="dashboard-editor-container">
    <el-card>
      <div>
        <el-row :gutter="20" class="rows">
          <el-col :span="10" :offset="2">
            <div id="reader_id">
              <el-card>
                <h3>读者证号：</h3>
                <el-input v-model="reader_id" placeholder="请输入还书者读者证……" />
              </el-card>
            </div>
          </el-col>
          <el-col :span="10">
            <div id="book_id">
              <el-card>
                <h3>书号：</h3>
                <el-input v-model="book_id" placeholder="请输入归还书号……" />
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row class="rows">
          <el-col :span="24" style="text-align: center">
            <div id="check">
              <el-button icon="el-icon-check" style="height: 60px;width: 240px;font-size: 18px;" @click="getDate">确认归还</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getDate } from '@/api/user'
export default {
  name: 'Index',
  data() {
    return {
      reader_id: '',
      book_id: ''
    }
  },
  methods: {
    getDate() {
      const data = {
        'reader_id': this.reader_id,
        'book_id': this.book_id
      }
      getDate(data).then(response => {
        this.reader_id = ''
        this.book_id = ''
        this.$message({
          message: '提交归还记录成功',
          type: 'success'
        })
      }).catch(error => {
        console.log(error)
        this.reader_id = ''
        this.book_id = ''
        this.$message({
          message: '提交归还记录失败',
          type: 'error'
        })
      })
    }
  }
}
</script>

<style scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
  }
  h3 {
    margin: 0 0 3px 0;
    color: #585858;
  }
  .rows {
    margin-top: 36px;
  }
</style>
